<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="web.css" >
    <title>Document</title>
</head>
<body>
    <div>
        <!-- headers -->
        <div class="headers">
            <h2  class="l">潜力无线科技有限公司</h2>
            <div class="r">
                <span class="tab active">首页</span>
                <span class="tab">产品</span>
                <span class="tab">客户</span>
                <span class="tab">会员</span>
                <span class="tab">我们</span>
            </div>
        </div>

        <div class="change show">首页内容</div>

        <div class="change">产品页内容</div>

        <div class="change">客户内容</div>

        <div class="change">会员内容</div>
        
        <div class="change">我们内容</div>
    </div>
</body>
<script>
    let tabBtn    = document.getElementsByClassName('tab')
    let changeDom =  document.getElementsByClassName('change')

    // 默认被加了高亮和显示盒子的坐标
    let defaultIndex = 0;

    for(let i=0;i<tabBtn.length;i++){
        tabBtn[i].onclick = ()=>{
            tabBtn[defaultIndex].classList.remove('active')
            changeDom[defaultIndex].classList.remove('show')

            tabBtn[i].classList.add('active')
            changeDom[i].classList.add('show')
            defaultIndex = i;
        }    
    }
</script>
</html>